<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>移动端</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="../../module/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../module/layui/css/layui.mobile.css" media="all">
    <style>
        body .layim-title {
            display: none;
        }

        body .layim-chat-main, body .layim-content, body .layui-layim {
            top: 0;
            padding-top: 0;
        }

        .ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .ellipsis-2 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .price {
            color: red;
        }

        .title {
            /*font-size: 13px;*/
            /*line-height: 13px;*/
        }

        .layim-chat-pre {
            padding-left: 0 !important;
        }

        .layim-chat-text {
            border-radius: 10px;
        }

        .send {
            background-color: #c9c9c9;
        }

        .layim-send.layui-disabled {
            color: #ffffff !important;
        }

    </style>
</head>
<body class="layui-layout-body theme-purple" style="height: 100vh">
<div id="chatTips" style="text-align: center;width: 100%;display: none">
    <div style="width: 200px;height: 200px;margin:150px auto 0 auto;"></div>
</div>


<script type="text/html" id="preChat">
    <li class="layim-chat-li layim-chat-pre">

        <div class="layim-chat-text">
            <div class="" style="height: 60px;width: 100%;">
                <div class="" style="width:30%;float: left">
                    <img src="{{d.img}}">
                </div>
                <div class="" style="width:70%;float: left">
                    <div style="padding-left: 10px">
                        <div class="title ellipsis-2">
                            {{d.name}}
                        </div>
                        <div class="price">￥{{d.price}}</div>
                        <div class="btn" style="text-align: right">
                            <button type="button"
                                    class=" pre-msg layui-btn layui-btn-warm layui-btn-sm layui-btn-radius">发送给客服
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</script>

<script src="../../module/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../module/layui/lay/modules/'
    })
    layui.use(['m_im', 'laytpl', 'jquery'], function () {
        var mobile = layui.mobile
            , layim = mobile.layim;
        var $ = layui.zepto;
        var laytpl = layui.laytpl;
        var im = layui.m_im;
        //客服信息
        var service = getQuery("service")
        //访问的用户
        var imuser = getQuery("im")
        //咨询的商品或订单
        var item = getQuery("item")
        if (!service || !imuser) {
            //参数错误
            return
        }
        var token = imuser.token;
        var im_token = imuser.im_token;
        if (!token && !im_token) {
            //参数错误
            return
        }
        var preMsg = "";
        if (item) {
            preMsg = laytpl($("#preChat").html()).render(item);
        }
        im.init({
            url: "ws://"+location.hostname+":8888?token=" + im_token,
            userInfo: imuser,
            imToken: im_token,
            csInfo: service,
            preMsg: preMsg
        });
        $("body").on("click", '.pre-msg', function () {
            var result = im.msg({
                content: "发送了一个商品链接---"
            })
            if (result) {
                $(this).removeClass("pre-msg").addClass("send").html("已发送")
            }
        })
    });

    //取url中的参数值
    function getQuery(name) {
        // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            // 对参数值进行解码
            return JSON.parse(decodeURIComponent(r[2]));
        }
        return null;
    }
</script>
</body>
</html>